<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>layui在线调试</title>
    <link rel="stylesheet" href="/layui/css/layui.css" media="all">
    <style>
        body {
            margin: 10px;
        }

        body .demo-class .layui-layer-title {
            background: #c00;
            color: #fff;
            border: none;
        }

        body .demo-class .layui-layer-btn {
            border-top: 1px solid #E9E7E7
        }

        body .demo-class .layui-layer-btn a {
            background: #333;
        }

        body .demo-class .layui-layer-btn .layui-layer-btn1 {
            background: #999;
        }
    </style>
</head>

<body>
<img id="img" style="display: none;" src="images/face/70.gif">
<blockquote class="layui-elem-quote">
    温馨提示：如果最左侧的导航的高度超出了你的屏幕，你可以将鼠标移入导航区域，然后滑动鼠标滚轮即可
</blockquote>

<div class="layui-tab layui-tab-card" lay-filter="demo" style="height: 300px;">
    <ul class="layui-tab-title">
        <li class="layui-this">演示说明</li>
        <li>标题一</li>
        <li>标题二</li>
        <li>标题三</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            在这里，你将以最直观的形式体验Layui！在编辑器中可以执行layui相关的一切代码。
            <br>你也可以点击左侧导航针对性地试验我们提供的示例。
        </div>
        <div class="layui-tab-item">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
    </div>
</div>
<div id="box_02">box_02</div>
<div id="pageDemo"></div>

<script src="/layui/layui.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    layui.use(['layer', 'laypage', 'element'], function() {
        var layer = layui.layer,
            laypage = layui.laypage,
            element = layui.element();

        //向世界问个好
        layer.msg('Hello World');

        //监听Tab切换
        element.on('tab(demo)', function(data) {
            layer.msg('切换了：' + this.innerHTML);

        });

        //分页
        laypage({
            cont: 'pageDemo' //分页容器的id
            ,
            pages: 12 //总页数
            ,
            skin: '#008cee' //自定义选中色值
            ,skip: true //开启跳页
            ,
            jump: function(obj, first) {
                if(!first) {
                    layer.msg(JSON.stringify(obj.curr));


                }
            }
        });

        function alert1() {
            layer.open({
                skin: 'demo-class',
                type:1,//加上这句话才能点击多次的时候有效，否则第二次点击的时候不能正确的弹出
                area: ["300px","200px"],//弹窗的大小
                content: $('#img'),
                //btnAlign: 'c'//控制下面两个按钮显示的位置
                title: "这是弹出框的标题",
                //btn: ['确定', '取消'],//这是弹出框的按钮
                shadeClose:true,//点击遮罩层同样能关闭弹窗
                yes: function(index, layero) {
                    //按钮【按钮一】的回调

                    console.log(JSON.stringify(layero))
                    layer.close(index);//点击确定之后，需要这句话才能关闭
                },
                btn2: function(index, layero) {
                    //按钮【按钮二】的回调
                    console.log(JSON.stringify(layero))

                    //return false 开启该代码可禁止点击该按钮关闭
                },
                btn3: function(index, layero) {
                    //按钮【按钮三】的回调

                    //return false 开启该代码可禁止点击该按钮关闭
                },
                cancel: function() {
                    //右上角关闭回调

                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
        }
        $('#box_02').click(function() {
            alert1();
        })
    });
</script>
</body>

</html>